<template>
  <Dialog :title="title" v-model="dialogVisible" width="80%" top="5vh">
    <el-descriptions v-loading="formLoading" :column="1" border label-width="230">
      <el-descriptions-item :label="t('awardsAudit.fields.jobCode')">
        {{ candidate.jobCode }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.studentName')">
        {{ candidate.studentName }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('awardsAudit.fields.major')">
        {{ candidate.major }}
      </el-descriptions-item>
      <el-descriptions-item :label="t('reviewJudgeScene.fields.scientificPayoffs')">
        {{ candidate.scientificPayoffs ?? '-' }}
      </el-descriptions-item>
      <el-descriptions-item :label="title">
        <template v-if="selectType === 'RADIO'">
          <el-radio-group v-model="selectValue">
            <div class="flex flex-col gap-5px">
              <el-radio
                v-for="(option, index) in selectOptions"
                :key="index"
                :value="option.value"
                :disabled="option.isDisable"
              >
                <div class="flex items-center gap-8px">
                  <div>
                    <span>{{ option.label }}</span>
                    <span class="text-#888 ml-5px"
                    >{{ t('reviewJudgeScene.reviewVote.remaining') }}: {{ option.remaining }}</span
                    >
                  </div>
                  <div v-if="option.isDisable" class="flex items-center gap-3px">
                    <Icon icon="ep:warning-filled" :size="12" color="#E6A23C" />
                    <span class="text-12px">{{ option.disableReason }}</span>
                  </div>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </template>
        <template v-else-if="selectType === 'SELECT'">
          <el-select v-model="selectValue" :placeholder="t('common.selectTextPlaceholder')">
            <el-option
              v-for="(option, index) in selectOptions"
              :key="index"
              :label="option.label"
              :value="option.value"
              :disabled="option.isDisable"
            >
              <div class="flex items-center gap-8px">
                <div>
                  <span>{{ option.label }}</span>
                  <span class="text-#888 ml-5px"
                    >{{ t('reviewJudgeScene.reviewVote.remaining') }}: {{ option.remaining }}</span
                  >
                </div>
                <div v-if="option.isDisable" class="flex items-center gap-3px">
                  <Icon icon="ep:warning-filled" :size="12" color="#E6A23C" />
                  <span class="text-12px">{{ option.disableReason }}</span>
                </div>
              </div>
            </el-option>
          </el-select>
        </template>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button
        :disabled="formLoading || Boolean(!selectValue)"
        type="primary"
        @click="submitForm"
      >
        {{ t('common.ok') }}
      </el-button>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { CandidateJudgesRespVO, ReviewSceneApi, OptionVO } from '@/api/awards/reviewscene'

defineOptions({ name: 'ReviewJudgeVote' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false)
const formLoading = ref(false)
const candidate = ref<CandidateJudgesRespVO>({} as CandidateJudgesRespVO)

const selectType = ref<'RADIO' | 'SELECT'>() // 投票类型
const selectOptions = ref<OptionVO[]>([]) // 投票选项
const selectValue = ref<string>() // 投票值

const title = computed(() =>
  selectType.value === 'RADIO'
    ? t('reviewJudgeScene.reviewVote.vote')
    : t('reviewJudgeScene.reviewVote.recommend')
)

const emits = defineEmits(['success'])
// 提交表单
const submitForm = async () => {
  if (!candidate.value || !selectValue.value) return
  formLoading.value = true
  try {
    await ReviewSceneApi.submitVote({
      awardsInstanceId: candidate.value.awardId,
      awardsCandidateId: candidate.value.id,
      value: selectValue.value
    })
    emits('success')
    message.success(t('common.operSuccess'))
    dialogVisible.value = false
  } catch {}
  formLoading.value = false
}

// 获取选项
const getOptions = async () => {
  if (!candidate) return
  const data = await ReviewSceneApi.getVoteOptions(candidate.value.awardId, candidate.value.id)
  selectType.value = data.type
  selectOptions.value = data.options
}

// 打开弹窗
const open = async (row: CandidateJudgesRespVO) => {
  reset()
  dialogVisible.value = true
  formLoading.value = true
  candidate.value = row
  try {
    await getOptions()
  } finally {
    formLoading.value = false
  }
}

const reset = () => {
  candidate.value = {} as CandidateJudgesRespVO
  selectType.value = undefined
  selectOptions.value = []
  selectValue.value = undefined
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
